<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
      label-width="70px">
      <el-form-item label="姓名" prop="name">
        <el-input v-input-restrict v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 200px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="账号" prop="phoneNumber">
        <el-input v-input-restrict v-model="queryParams.phoneNumber" placeholder="请输入账号" clearable style="width: 200px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="大区" prop="regionId">
        <el-select v-model="queryParams.regionId" placeholder="大区" filterable style="width: 200px">
          <el-option label="全部" :value="undefined" />
          <el-option v-for="dict in regionOptions" :key="dict.regionId" :label="dict.regionName"
            :value="dict.regionId" />
        </el-select>
      </el-form-item>
      <el-form-item label="门店" prop="schoolId" v-if="shopOptions && shopOptions.length > 1">
        <el-select v-model="queryParams.schoolId" placeholder="门店" filterable style="width: 200px">
          <el-option label="全部" :value="undefined" />
          <el-option v-for="dict in shopOptions" :key="dict.schoolId" :label="dict.schoolName" :value="dict.schoolId" />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位" prop="postId">
        <el-select v-model="queryParams.postId" placeholder="岗位" filterable style="width: 200px">
          <el-option label="全部" :value="undefined" />
          <el-option v-for="dict in postOptions" :key="dict.postId" :label="dict.postName" :value="dict.postId" />
        </el-select>
      </el-form-item>
      <el-form-item label="补考审核" prop="publish" v-if="queryParams.status == '8'">
        <el-select style="width: 200px" v-model="queryParams.auditStatus" filterable placeholder="补考审核">
          <el-option label="全部" :value="undefined" />
          <el-option label="未处理" :value="0" />
          <el-option label="已通过" :value="1" />
          <el-option label="已驳回" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="queryParams.status !== '8'">
        <el-button v-preventReClick type="warning" plain icon="el-icon-download" size="mini"
          @click="handleExport">导出</el-button>
      </el-col>
      <el-col :span="1.5" v-if="queryParams.status == '8'">
        <el-button v-preventReClick type="warning" plain icon="el-icon-download" size="mini"
          @click="handleExport2">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- 搜索按钮 -->
    <!-- <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->
    <!-- 已通过3未通过4 -->
    <div class="commonMenu">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="">全部</el-menu-item>
        <el-menu-item index="5">已通过</el-menu-item>
        <el-menu-item index="6">未通过</el-menu-item>
        <el-menu-item index="2">未批改</el-menu-item>
        <el-menu-item index="3">未提交</el-menu-item>
        <el-menu-item index="8">补考审核</el-menu-item>
      </el-menu>
    </div>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="抽查名称" show-overflow-tooltip align="center" prop="title" />
      <el-table-column label="姓名" show-overflow-tooltip align="center" prop="name" />
      <el-table-column label="账号" show-overflow-tooltip align="center" prop="phoneNumber">
      </el-table-column>

      <el-table-column label="大区" show-overflow-tooltip align="center" prop="regionName" />

      <el-table-column label="门店" align="center" prop="schoolName">
      </el-table-column>
      <el-table-column label="岗位" align="center" prop="postName">
      </el-table-column>
      <el-table-column label="成绩" align="center" prop="score">
        <template slot-scope="scope">
          {{ scope.row.score || scope.row.score == 0 ? scope.row.score : "--" }}
        </template>
      </el-table-column>
      <el-table-column label="补考次数" align="center" prop="examApplyNum">
        <template slot-scope="scope">
          {{
      scope.row.examApplyNum || scope.row.examApplyNum == 0
        ? scope.row.examApplyNum
        : "--"
    }}
        </template>
      </el-table-column>
      <el-table-column v-if="activeIndex == '8'" label="补考状态" align="center" prop="auditStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.auditStatus === 0" class="el-tag el-tag--warning">
            未处理
          </span>
          <span v-else-if="scope.row.auditStatus === 2 || scope.row.auditStatus === 3
      " class="el-tag el-tag--danger">
            未通过
          </span>
          <span v-else class="el-tag el-tag--success"> 已通过 </span>
        </template>
      </el-table-column>

      <el-table-column v-if="activeIndex !== '8'" label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.passing === 0 || scope.row.passing === null" class="el-tag el-tag--danger">
            未提交
          </span>
          <span v-else-if="scope.row.passing === 2" class="el-tag el-tag--warning">
            未批改
          </span>
          <span v-else-if="scope.row.passing === -1" class="el-tag el-tag--danger">
            未通过
          </span>
          <span v-else-if="scope.row.passing === 1" class="el-tag el-tag--success">
            已通过
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180">
        <template slot-scope="scope">
          <div @dblclick="handleDoubleClick(scope.row, scope.$index)" style="width: 100%;height: 100%;"
            v-if="!scope.row.editing">{{ scope.row.remark || '无' }}</div>
          <el-input ref="input_dom" v-if="scope.row.editing" v-model="scope.row.remark" size="small"
            @blur="onRemarkBlur(scope.row, scope.$index)"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="220" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <span v-if="activeIndex !== '8'">
            <el-button v-if="scope.row.passing === 1 || scope.row.passing === -1" v-preventReClick size="mini"
              type="text" icon="el-icon-view" @click="toPaper(scope.row)">详情</el-button>
            <el-button v-if="scope.row.passing === 2 ||
      scope.row.passing === -1 ||
      scope.row.passing === 1
      " v-preventReClick size="mini" type="text" icon="el-icon-edit"
              @click="handleCorrect(scope.row)">批改</el-button></span>
          <!-- 如果是审核 -->
          <span v-else>
            <el-button v-preventReClick size="mini" type="text" icon="el-icon-view"
              @click="toPaper(scope.row)">详情</el-button>
            <el-button v-if="scope.row.auditStatus === 0" v-preventReClick size="mini" type="text" icon="el-icon-thumb"
              @click="handlePass(scope.row, false)">驳回</el-button>
            <el-button v-if="scope.row.auditStatus === 0" v-preventReClick size="mini" type="text" icon="el-icon-thumb"
              @click="handlePass(scope.row, true)">通过</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { getMineschoolId } from "@/api/course/course";
import { listPost_school } from "@/api/school/list";
import { listPost_region } from "@/api/school/area";
import { listPost } from "@/api/system/post";

import {
  examSpotCheckSituationList,
  examSpotCheckExamApplyList,
  examSpotCheckDeals, editRemark
} from "@/api/checkTest/checkTest";
export default {
  name: "Post",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      activeIndex: "",
      // 考核发放组件
      grant_Open: false,
      grant_item: {},
      // 考试组件
      exam_type: 5,
      exam_paperOpen: false,
      testCkeckId: undefined,
      exam_taskId: undefined,
      // 考试组件返回值
      loading: true,

      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      list: [],
      shopOptions: [],
      postOptions: [],
      regionOptions: [],

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: "",
        name: undefined,
        examId: undefined,
        regionId: undefined,
        schoolId: undefined,
        postId: undefined,
        auditStatus: undefined,
      },
    };
  },
  created() {
    this.activeIndex = this.$route.query.activeIndex
      ? this.$route.query.activeIndex
      : "";
    this.getList();
    this.getshopList();

    this.getPostList();
    this.getRegionList();
  },
  methods: {
    async onRemarkBlur(row, index) {
      let res = await editRemark(row)
      if (res.code == 200) {
        this.$message.success('备注修改成功')
        this.$set(row, 'editing', false);
      }

    },
    handleDoubleClick(row, index) {
      this.$set(row, 'editing', true);
      this.$nextTick(() => {
        this.$refs.input_dom.focus();
      });
      // 确保DOM更新后再聚焦
    },
    async handleExport() {
      this.download(
        "/manager/examSpotCheck/situation/export",
        {
          ...this.queryParams,
        },
        `post_${new Date().getTime()}.xlsx`
      );
    },
    handleExport2() {
      this.download(
        "/manager/examSpotCheck/examApply/export",
        {
          ...this.queryParams,
        },
        `post_${new Date().getTime()}.xlsx`
      );
    },
    /* 通过 驳回抽查补考申请 */
    handlePass(item, type) {
      let txt;
      let tip;
      if (type) {
        txt = `确认通过【${item.name}】的【${item.title}】的抽查吗?通过后员工可再次考核！`;
        tip = `通过确认`;
      } else {
        txt = `确认驳回【${item.name}】的【${item.title}】的抽查吗?驳回后该员工的本次考核结果为不合格,并且不可再次参加本次考核!`;
        tip = `驳回确认`;
      }
      this.$confirm(txt, tip, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await examSpotCheckDeals({
            id: item.id,
            auditStatus: type ? 1 : 2,
          });
          this.$modal.msgSuccess(type ? "通过成功" : "驳回成功");
          this.getList();
        })
        .catch(() => { });
    },

    /* 状态menu */
    handleSelect(e) {
      switch (e) {
        case "":
          this.queryParams.status = "";
          break;
        //   未通过
        case "5":
          this.queryParams.status = "3";
          break;
        //   已通过
        case "6":
          this.queryParams.status = "4";
          break;
        //   未批改
        case "2":
          this.queryParams.status = "2";
          break;
        //   未提交
        case "3":
          this.queryParams.status = "0";
          break;
        //   补考申请
        case "8":
          this.queryParams.status = "8";
          break;
      }
      this.activeIndex = e;

      this.getList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.queryParams.examId = this.$route.query.id;
      if (this.activeIndex !== "8") {
        this.queryParams.auditStatus = "";
        examSpotCheckSituationList(this.queryParams).then((response) => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      } else {
        let data = { ...this.queryParams };
        data.status = "";
        examSpotCheckExamApplyList(data).then((response) => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    },
    /* 获取大区列表 */
    getRegionList() {
      listPost_region({
        pageNum: 1,
        pageSize: 9999,
      }).then((response) => {
        this.regionOptions = response.rows;
      });
    },
    /* 获取门店列表 */
    getshopList() {
      if (
        this.$store.getters.roles.every(
          (item) => item === "sa" || item === "user"
        )
      ) {
        getMineschoolId().then((res) => {
          this.shopOptions = res.data;
        });
      } else {
        listPost_school({
          pageNum: 1,
          pageSize: 9999,
        }).then((res) => {
          this.shopOptions = res.rows;
        });
      }
    },
    /* 获取岗位 */
    getPostList() {
      listPost({
        pageNum: 1,
        pageSize: 9999,
      }).then((response) => {
        this.postOptions = response.rows;
      });
    },
    /* 删除操作 */
    handleDel(row) { },
    /* 编辑按钮操作 */
    handleEdit(e) {
      this.testCkeckId = e.id;
      this.exam_type = 6;
      this.exam_paperOpen = true;
    },
    /** 新增按钮操作 */
    async handleAdd() {
      let res = await examSpotCheckAdd({
        examType: 4,
      });
      this.getList();
      this.testCkeckId = res.data;
      this.exam_type = 5;
      this.exam_paperOpen = true;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 批改操作 */
    handleCorrect(row) {
      this.$router.push({
        path: "/testCheck/approvalAnswer",
        query: {
          keyId: row.examPaperId,
          userId: row.userId,
        },
      });
    },
    /* 前往页面详情 */
    toPaper(item) {
      this.$router.push({
        path: "/testCheck/examDetail",
        query: {
          id: item.examPaperId,
          userId: item.userId,
        },
      });
    },
    /* 详情 */
    handleDetail(row) {
      // 跳转到详情页
      this.$router.push({
        path: "/testCheck/detail",
        query: {
          id: row.id,
        },
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        amount: undefined,
        startDate: undefined,
        endDate: undefined,
        exam_type: undefined,
        courseIds: [],
      };
      this.resetForm("form");
    },
  },
};
</script>